<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="title">数字资产帐户</p>
      <div class="allAsset">
          <div class="d3">
            <div>
              <p class="title">总资产 (估值) </p>
              <p class="msg">{{math_deposit}}CNY</p>
            </div>
          </div>
          <p class="p4">
            <router-link to="/cashWithdraw">
              <img src="../common/imgs/icontixian.png" alt="">
              <span>提现</span>
            </router-link>
            <router-link to="/bill">
              <img src="../common/imgs/iconzhangdan.png" alt="">
              <span>账单</span>
            </router-link>
          </p>
      </div>
    </section>
    <section id="sec2">
      <p class="p1">
        <label for="hideZero">
          <input type="checkbox" id="hideZero" v-model="hideZero">
          <span>隐藏资产为0的帐户</span>
        </label>
      </p>
      <table cellpadding="0" cellspacing="0" border="0">
        <thead>
        <tr>
          <td>币种</td>
          <td>总量</td>
          <td>折合CNY</td>
          <td>可用</td>
          <td>冻结</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in math_list" v-show="item.show">
          <td>{{item.name}}</td>
          <td>{{item.total_coin}}</td>
          <td>{{item.total_price}}</td>
          <td>{{item.coin}}</td>
          <td>{{item.freeze_coin || '0.00'}}</td>
          <td class="setting">
            <router-link :to="{path : '/outCoins' , query :{coin : item.coin_name.toUpperCase() }}">提币</router-link>
            <router-link :to="{path : '/bill' , query :{coin : item.coin_name }}">账单</router-link>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>
<script>
  import { myAssets } from '../http/api';
  export default {
    name : 'asset',
    data(){
      return{
        hideZero : false,//是否隐藏0资产
        asset_deposit:'',//账户总资产
        otcMoney:'',//otc余额等信息
        machine_deposit:'',//合约包总金额
        math_deposit :0,//数字资产总和
        cny:'',//cny合约包余额
        power_list:[],//合约包列表
        cnyMoney :'',//cny余额
        math_list: [],//数字资产列表
        coins:['btc','eth','ltc','fil','bhp','bhp_fh','usdt'],//数字资产 图片提前加载 , ajax拿到的数据，根据coins的keys来排序
        powerOrder : ['USDT' , 'BCNY' ,'CNY'], //合约包排序规则
      }
    },
    watch:{
      'hideZero'(val){
        let mathList = this.math_list;
        let thiz = this;
        this.for(mathList , (item , index) => {
          if(val){
            let coin = item.coin;
            let freeze_coin = item.freeze_coin || 0;
            let result = Number(thiz.accAddMore(coin , freeze_coin));
            item.show = result === 0 ? false : true;
          }else{
            item.show = true;
          }
        });
        thiz.math_list = mathList;
      }
    },
    mounted() {
      let thiz = this;
      myAssets().then(res => {
        let data = res.data.res;
        thiz.math_list = thiz.packageMathList( data.my_finance , data.coinPrice);//数字资产列表
      });
    },
    methods:{
      packageMathList( arr , prices ){
        //组装数字资产，传入当前币种的arr 和 币种的价格数组prices
        let thiz = this;
        let math_deposit = 0 ;//数字资产总和
        for( let i = arr.length - 1 ; i >= 0 ; i-- ){
          arr[i].show = true;
          let curname = arr[i]['coin_name'].toLowerCase();//switch判断的名称
          let curimg = thiz.coins[i] || null;//设置对应图片
          let splitLen = 8; //币种保留位数
          if( !curimg  ){
            arr = thiz.arrRemove(arr , i);//如果imgs中不存在支付方式，删除此项
          } else {
            let cur_price;
            switch (curname) {
              case 'bhp':
                curname = 'BHP交易账户'; cur_price = prices['bhp_price']; splitLen = 4;
                break;
              case 'bhp_fh':
                curname = 'BHP分红账户'; cur_price = prices['bhpc_price']; splitLen = 4;
                break;
              case 'usdt':
                curname = 'USDT'; cur_price = prices['usdt_price']; splitLen = 4;
                break;
              case 'btc':
                curname = 'BTC'; cur_price = prices['btc_price'];
                break;
              case 'eth':
                curname = 'ETH'; cur_price = prices['eth_price'];
                break;
              case 'ltc':
                curname = 'LTC'; cur_price = prices['ltc_price'];
                break;
              case 'fil':
                curname = 'FIL'; cur_price = 0; arr[i].total_price = 0; splitLen = 4;
                break;
            }
            arr[i].coin = thiz.numSlice(arr[i].coin  , splitLen );//币种数量
            arr[i].name =  curname;//币种中文名称
            arr[i].price = cur_price;//估价
            // var total_price = thiz.numSlice( arr[i].total_price , splitLen );//估值
            arr[i].freeze_coin = thiz.numSlice( arr[i].freeze_coin , splitLen );//冻结
            arr[i].total_price =  thiz.numSlice( arr[i].total_price  , 2 );//折合
            // arr[i].can_use_coins = thiz.accSub(arr[i].coin , arr[i].freeze_coin);//可用数量
            // arr[i].can_use_coins = arr[i].can_use_coins < 0 ? 0 : arr[i].can_use_coins;
            arr[i].total_coin = thiz.accAddMore(arr[i].coin , arr[i].freeze_coin);
            math_deposit = thiz.accAddMore( arr[i].total_price , math_deposit );//计算总值
          }
        }
        thiz.math_deposit = thiz.numSlice( math_deposit , 2 ); //数字资产总和
        let order = thiz.coins; //排序规则
        arr.sort( function ( a , b ) {
          return order.indexOf(a.name) - order.indexOf(b.name);  //对数组排序，按照this.coins顺序 输出
        });
        return arr;
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-bottom: 150px;
  }
  section{
    .borderRadius();background: #fff;padding: 25px;
  }
  #sec1{
    >.title{
      font-size: 24px;color: #262626;
    }
    >.allAsset{
     padding-top: 32px;width: 100%;
      >.d3{
        overflow: hidden;padding-top: 0px;
        .title{
          color: #999999;font-size: 14px;
        }
        .msg{
          font-size: 18px;color: #262626;padding-top: 20px;
        }
        >div{
          float: left;width: 25%;position: relative;padding-left: 84px;
          &:first-child{
            padding-left: 0;
            >.msg{
              .colorYellow;font-size: 24px;font-weight: 600;padding-top: 17px;
            }
          }
        }
      }
      >.p4{
        overflow: hidden;padding-top: 41px;
        >a{
          display: inline-block;height: 40px;.border;.borderRadius;width: 109px;margin-left: 17px;
          &:first-child{
            margin-left: 0;
          }
          &:hover{
            border-color: #fbd194;
          }
          >img{
            vertical-align: middle;width: 22px;height: 22px;
          }
          >span{
            vertical-align: middle;line-height: 40px;font-size: 14px;
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 8px;min-height: 440px;padding-bottom: 80px;
    >.p1{
      text-align: right;color: #999999;font-size: 12px;position: relative;
      label{
        position: relative;height: 22px;display: inline-block;
        span{
          position: relative;padding-left: 22px;display: inline-block;line-height: 22px;height: 22px;
          &:before{
            content: '';width: 16px;height: 16px;display: block;border: 1px solid#999999;position: absolute;z-index: 1;left: 0;top: 50%;margin-top: -8px;.borderRadius;box-sizing: border-box;
          }
        }
        input{
          opacity: 0;width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top:0;
          &:hover{
            cursor: pointer;
          }
          &:checked+span:before{
            content: '';display: inline-block;border: 0;background: url("../common/imgs/checkedbgyellow.png") center center no-repeat;background-size: 100% 100%;
          }
        }
      }
    }
    table{
      width: 100%;
    }
    thead {
      >tr>td:last-child{
        text-align: right;
      }
      td{
        color: #999999;font-size: 14px;padding: 20px 0;
      }
    }
    tbody{
      td{
        border-bottom: 1px solid#F4F4F6;padding: 15px 0;color: #262626;font-size: 12px;
      }
      >tr>td:last-child{
        text-align: right;
      }
      .setting{
        >a{
          display: inline-block;margin-left: 40px;.colorYellow;
          &:first-child{
            margin-left: 0;
          }
        }
      }
    }
  }
</style>
